<template>
  <view class="mine">
    <view class="header">
      <view class="user-news">
        <view class="icon_box">
          <image
            class="user-news-icon"
            @tap="goesTo('/pages/mine/news/list')"
            src="@/static/img/base/news.png"
            alt=""
          ></image>
          <u-badge
            v-if="unreadNewsNub"
            class="user-news-mark"
            :count="unreadNewsNub"
            :offset="[-15, -20]"
          ></u-badge>
        </view>
        <image
          @tap="goesTo('/pages/mine/set/setUp')"
          class="setting"
          src="../../../static/mine/setting.png"
          mode=""
        ></image>
      </view>
    </view>
    <view class="main">
      <view class="portrait">
        <!-- <image @click="goesTo('/pages/tabbar/user/personalCenter/personalInformation')"  class="img" src="../../../static/tabbar/mine.png" mode=""></image> -->
        <image
          @click="
            goesTo('/pages/tabbar/user/personalCenter/personalInformation')
          "
          class="img"
          :src="info.face ? info.face : defaultFace"
          mode=""
        ></image>
        <view class="nickName">
          <text>{{ info.nickName }}</text>
        </view>
      </view>
      <view class="focus">
        <view
          class="focus-items"
          @tap="goesTo('/pages/tabbar/user/myCollect', '关注')"
        >
          <view class="count">{{ info.followNum }}</view>
          <view class="name">关注</view>
        </view>
        <view
          class="focus-items"
          @tap="goesTo('/pages/tabbar/user/myCollect', '我的收藏')"
        >
          <view class="count">{{ info.collectionNum }}</view>
          <view class="name">收藏</view>
        </view>
        <view class="focus-items">
          <view class="count">{{ info.likedNum }}</view>
          <view class="name">获赞</view>
        </view>
      </view>
      <view class="orders">
        <view class="title">
          <view class="word"> 我的订单 </view>
          <view
            class="checkAll"
            @tap="navTo('/pages/mine/myOrder/orderIndex', '')"
          >
            <text>查看全部</text>
            <image
              class="icons"
              src="../../../static/mine/arrow-right .png"
              mode=""
            ></image>
          </view>
        </view>
        <view class="status">
          <view
            class="status-items"
            v-for="(item, index) in statueList"
            :key="index"
            @tap="navTo('/pages/mine/myOrder/orderIndex', item.status)"
          >
            <image class="img" :src="item.imgUrl" mode=""></image>
            <view class="word">{{ item.word }}</view>
          </view>
        </view>
      </view>
      <view class="moreFunc">
        <view class="title">更多功能</view>
        <view class="status">
          <view
            class="status-items"
            v-for="(item, index) in moreList"
            :key="index"
            @tap="navTo(item.url, item.word)"
          >
            <image class="img" :src="item.imgUrl" mode=""></image>
            <view class="word">{{ item.word }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 模态框  -->
    <authenModal
      v-show="isShow"
      @close="closeBtn"
      @confirm="confirmHandle"
      :content="content"
    ></authenModal>
  </view>
</template>

<script>
import { API } from "../../../config/myApi.js";
import authenModal from "@/components/modal/authen-modal.vue";
export default {
  components: {
    authenModal,
  },
  data() {
    return {
      unreadNewsNub: 0,
      statueList: [
        {
          imgUrl: "../../../static/mine/wallet.png",
          word: "待付款",
          status: "UNPAID",
        },
        {
          imgUrl: "../../../static/mine/car.png",
          word: "待发货",
          status: "WAIT_SHIP",
        },
        {
          imgUrl: "../../../static/mine/shopCar.png",
          word: "待收货",
          status: "WAIT_ROG",
        },
        {
          imgUrl: "../../../static/mine/massege.png",
          word: "已完成",
          status: "PAID",
        },
        {
          imgUrl: "../../../static/mine/share.png",
          word: "已取消",
          status: "CANCEL",
        },
      ],
      moreList: [
        {
          imgUrl: "../../../static/mine/add.png",
          navTo: "consult",
          word: "我的咨询",
          url: "/pages/tabbar/user/myFunction",
        },
        {
          imgUrl: "../../../static/mine/ctrl.png",
          word: "我的预约",
          navTo: "appointment",
          url: "/pages/tabbar/user/myFunction",
        },
        {
          imgUrl: "../../../static/mine/book.png",
          word: "我的课程",
          navTo: "course",
          url: "/pages/tabbar/user/myFunction",
        },
        {
          imgUrl: "../../../static/mine/conllect.png",
          word: "我的订阅",
          navTo: "subscribe",
          url: "/pages/tabbar/user/myFunction",
        },
        {
          imgUrl: "../../../static/mine/comunicate.png",
          word: "我的话题",
          navTo: "topic",
          url: "/pages/tabbar/user/myTopic/myTopic",
        },
        {
          imgUrl: "../../../static/mine/doctor.png",
          word: "患者信息",
          navTo: "message",
          url: "/pages/tabbar/user/myFunction",
        },
        {
          imgUrl: "../../../static/mine/clocks.png",
          word: "锻炼记录",
          navTo: "message",
          url: "/pages/tabbar/user/myFunction",
        },
      ],
      defaultFace: "../../../static/tabbar/mine.png",
      info: {},
      // 模态框
      isShow: false,
      content: "请先完成实名认证才可使用",
    };
  },
  onLoad() {
    this.getUnreadNewsFn();
    this.getUserInfo();
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.getUnreadNewsFn();
    this.getUserInfo("pull");
  },
  onShow() {
    this.getUnreadNewsFn();
    this.getUserInfo();
  },
  mounted() {
    uni.$on("toBack", (val) => {
      console.log("回到", val);
      if (val) this.getUserInfo();
    });
  },
  methods: {
    getUserInfo(v) {
      // const data = uni.getStorageSync('userDetail')
      API.getMember()
        .then((res) => {
          this.info = res.result;
        })
        .finally(() => {
          uni.stopPullDownRefresh();
          if (v == "pull") {
            uni.showToast({
              title: "刷新成功",
              icon: "success",
            });
          }
        });
    },
    // 获取未读消息
    getUnreadNewsFn() {
      API.getUnreadNewsApi().then((res) => {
        if (res.code == 200) {
          this.unreadNewsNub = res.result || 0;
        }
      });
    },
    goesTo(url, label) {
      let param = {
        label: label,
      };

      if (url != "/pages/mine/set/setUp") {
        this.isAuthen(() => {
          this.$navTo.navTos(url, param);
        });
      } else {
        this.$navTo.navTos(url, param);
      }
    },
    // 是否认证
    isAuthen(callback) {
      console.log("认证函数：", this.info);
      if (this.info.realAuthentication) {
        // 是否认证
        this.isShow = false;
        callback();
        return;
      } else {
        this.isShow = true;
      }
    },
    // 关闭模态框
    closeBtn() {
      this.isShow = false;
    },
    // 去认证
    confirmHandle() {
      this.isShow = false;
      uni.navigateTo({
        url: "/pages/passport/authen",
      });
    },
    editAnFocus(label, val) {
      let url = "/pages/tabbar/user/personalCenter/perEdit";
      let param = {
        label: label,
        val: val,
      };
      this.isAuthen(() => {
        this.$navTo.navTos(url, param);
      });
    },
    navTo(url, val) {
      // let url = url
      let param = {
        val: val,
      };
      if (url == "/pages/tabbar/user/myTopic/myTopic") {
        console.log(111);
        uni.navigateTo({
          url: "/pages/tabbar/user/myTopic/myTopic",
        });
      }
      console.log(url);
      if (val != "WAIT_SHIP" && val != "WAIT_ROG") {
        this.isAuthen(() => {
          this.$navTo.navTos(url, param);
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../aless/mine.scss";
.content {
  padding: 0rpx 30rpx;
  overflow: hidden;
  .logoutBtn {
    width: 100%;
    height: 88rpx;
    background-color: #f4333c;
    border-radius: 44rpx;
    line-height: 88rpx;
    text-align: center;
    color: white;
    margin: 500rpx auto 0;
  }
}
</style>
